<template>
    <div :class="['fullscreen-background', customClass]" :style="{ backgroundImage: `url(${backgroundImage})` }">
      <slot></slot>
    </div>
</template>
  
<script setup>
  defineProps({
    backgroundImage: {
      type: String,
      required: true
    },
    customClass: {
      type: String,
      default: ''
    }
  });
</script>
  
<style scoped>
  .fullscreen-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 使用 vh 单位确保高度适应视口 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* 使图片覆盖整个容器 */
    display: flex; /* 添加 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
  }
</style>